<template>
  <div class="app-container">
    <el-card shadow="hover">
      <el-form ref="form" size="mini" :model="listQuery" label-width="100px">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="cgdbh" :label="$t('PurchaseReceipt.cgdbh')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.cgdbh')" v-model="listQuery.cgdbh"/>
            </el-form-item>
          </el-col><!--采购单编号-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="cgdname" :label="$t('PurchaseReceipt.cgdname')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.cgdname')" v-model="listQuery.cgdname"/>
            </el-form-item>
          </el-col><!--采购单名称-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="cgzt" :label="$t('PurchaseReceipt.cgdzt')">
              <el-select v-model="listQuery.cgzt" :placeholder="'请选择'+$t('PurchaseReceipt.cgdzt')">
                <el-option :value="-1" label="全部"/>
                <template v-for="(item,index) of dictData.cgdypmxb_type">
                  <el-option :key="item.id" :label="item.dictLabel" :value="item.dictValue"/>
                </template>
              </el-select>
            </el-form-item>
          </el-col><!--采购状态-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="yyname" :label="$t('PurchaseReceipt.yyname')">
              <el-input clearable v-model="listQuery.yyname" :placeholder="'请输入'+$t('PurchaseReceipt.yyname')"/>
            </el-form-item>
          </el-col><!--采购医院名称-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="lsh" :label="$t('PurchaseReceipt.lsh')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.lsh')" v-model="listQuery.lsh"/>
            </el-form-item>
          </el-col><!--药品流水号-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="name" :label="$t('PurchaseReceipt.name')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.name')" v-model="listQuery.name"/>
            </el-form-item>
          </el-col><!--通用名-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="jx" :label="$t('PurchaseReceipt.jx')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.jx')" v-model="listQuery.jx"/>
            </el-form-item>
          </el-col><!--剂型-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="specification"
                          :label="$t('PurchaseReceipt.specification')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.specification')"
                        v-model="listQuery.specification"/>
            </el-form-item>
          </el-col><!--规格-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="unit" :label="$t('PurchaseReceipt.unit')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.unit')" v-model="listQuery.unit"/>
            </el-form-item>
          </el-col><!--单位-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="zhxs" :label="$t('PurchaseReceipt.zhxs')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.zhxs')" v-model="listQuery.zhxs"/>
            </el-form-item>
          </el-col><!--转换系数-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="gysname" :label="$t('PurchaseReceipt.gysname')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.gysname')" v-model="listQuery.gysname"/>
            </el-form-item>
          </el-col><!--生产企业-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="spname" :label="$t('PurchaseReceipt.spname')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.spname')" v-model="listQuery.spname"/>
            </el-form-item>
          </el-col><!--商品名-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="yptype" :label="$t('PurchaseReceipt.yptype')">
              <el-select v-model="listQuery.yptype" :placeholder="'请选择'+$t('PurchaseReceipt.yptype')">
                <el-option :value="-1" label="全部"/>
                <template v-for="(item,index) of dictData.yptype">
                  <el-option :key="item.id" :label="item.dictLabel" :value="item.dictValue"/>
                </template>
              </el-select>
            </el-form-item>
          </el-col><!--药品类别-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="ypph" :label="$t('PurchaseReceipt.ypph')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.ypph')" v-model="listQuery.ypph"/>
            </el-form-item>
          </el-col><!--药品批号-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="rkdh" :label="$t('PurchaseReceipt.rkdh')">
              <el-input clearable :placeholder="'请输入'+$t('PurchaseReceipt.rkdh')" v-model="listQuery.rkdh"/>
            </el-form-item>
          </el-col><!--入库单号-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="qyname" :label="$t('PurchaseReceipt.qyname')">
              <el-select v-model="listQuery.yptype" :placeholder="'请选择'+$t('PurchaseReceipt.qyname')">
                <el-option :value="-1" label="全部"/>
                <template v-for="(item,index) of dictData.qyname">
                  <el-option :key="item.id" :label="item.dictLabel" :value="item.dictValue"/>
                </template>
              </el-select>
            </el-form-item>
          </el-col><!--供货商-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item :label="$t('PurchaseReceipt.kscgsj')">
              <el-date-picker
                v-model="listQuery.kscgsj"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col><!--开始采购时间-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item :label="$t('PurchaseReceipt.jecgsj')">
              <el-date-picker
                v-model="listQuery.jecgsj"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col><!--结束采购时间-->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="4">
            <el-form-item prop="rktime"
                          :label="$t('PurchaseReceipt.rktime')">
              <el-date-picker
                v-model="listQuery.rktime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col><!--入库时间-->
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :xs="12" :sm="9" :md="6" :lg="3" :xl="3">
            <el-button class="pan-btn green-btn" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="getList">
              查询
            </el-button>
          </el-col>
          <el-col :xs="12" :sm="9" :md="6" :lg="3" :xl="3">
            <el-button class="pan-btn yellow-btn" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="reset">
              清空
            </el-button>
          </el-col>
          <el-col :xs="12" :sm="9" :md="6" :lg="3" :xl="3">
            <el-button :loading="downloadLoading" style="margin-left: 10px;" class="pan-btn blue-btn" type="primary"
                       icon="el-icon-top"
                       @click="handleDownload">
              {{ $t('table.export') }}
            </el-button>
          </el-col>
        </el-row><!--查询和清空和导出-->
      </el-form>
    </el-card>
    <br/>
    <el-card shadow="hover">
      <el-row type="flex" justify="space-between">
        <el-col t :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-row type="flex" justify="space-between">
            <el-col :push="1">
              <el-button :loading="downloadLoading" class="pan-btn light-blue-btn" type="primary"
                         icon="el-icon-bottom"
                         @click="handleBatchDel">
                {{isMultiple?"取消选择":"请选择"}}
              </el-button>
            </el-col><!---->
            <el-col :pull="4" v-if="isMultiple">
              <el-button :loading="downloadLoading" class="pan-btn light-blue-btn" type="primary"
                         icon="el-icon-bottom"
                         @click="handleAffirmDel">
                确认入库
              </el-button>
            </el-col><!---->
          </el-row>
        </el-col><!--确认入库-->
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <pagination style="margin: 0;padding: 0" v-show="pageInfo.total > 0" :total="pageInfo.total"
                      :page.sync="pageInfo.page"
                      :limit.sync="pageInfo.size"
                      @pagination="this.getList"/><!--分页-->
        </el-col><!--分页-->
      </el-row>
      <br/>
      <el-table :data="tableData"
                ref="multipleTable" v-loading="listLoading" border stripe size="mini"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column v-if="isMultiple"
                         type="selection"
                         width="55">
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.cgdbh')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.lsh }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.name')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.lsh')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.lsh }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.name')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.spname')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.spname }}</span>
          </template>
        </el-table-column><!--商品名-->

        <el-table-column :label="$t('PurchaseReceipt.zbprice')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.zbprice }}</span>
          </template>
        </el-table-column><!--中标价-->

        <el-table-column :label="$t('PurchaseReceipt.jyprice')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jyprice }}</span>
          </template>
        </el-table-column><!--交易价-->

        <el-table-column :label="$t('PurchaseReceipt.cgl')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.cgl }}</span>
          </template>
        </el-table-column><!--采购量-->

        <el-table-column :label="$t('PurchaseReceipt.rkje')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.rkje }}</span>
          </template>
        </el-table-column><!--采购金额-->

        <el-table-column :label="$t('PurchaseReceipt.rkl')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.rkl }}</span>
          </template>
        </el-table-column><!--入库量-->

        <el-table-column :label="$t('PurchaseReceipt.rkdh')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.rkdh }}</span>
          </template>
        </el-table-column><!--入库单号-->

        <el-table-column :label="$t('PurchaseReceipt.ypph')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.ypph }}</span>
          </template>
        </el-table-column><!--药品批号-->

        <el-table-column :label="$t('PurchaseReceipt.ypyxsj')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.ypyxsj }}</span>
          </template>
        </el-table-column><!--药品有效期-->

        <el-table-column :label="$t('PurchaseReceipt.jx')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.jx }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.specification')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.specification }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.unit')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.unit }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.zhxs')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.zhxs }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.zbprice')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.zbprice }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.yptype')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.yptype }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.ypjyzt')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.ypjyzt }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('PurchaseReceipt.qyname')" align="center">
          <template slot-scope="{row}">
            <span>{{ row.qyname }}</span>
          </template>
        </el-table-column>

        <el-table-column width="150" :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" class="pan-btn tiffany-btn" size="mini" @click="handleUpdate(row)">
              {{ $t('table.edit') }}
            </el-button>
            <el-button v-if="row.status!='deleted'" class="pan-btn pink-btn" size="mini" type="danger"
                       @click="handleDelete(row,$index)">
              {{ $t('table.delete') }}
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {getYyjycgdrkbList, save, update, del} from "@/api/cggl/cgdrk"
  import {getDicts} from "@/api/system/dict/data"

  import {parseTime} from '@/utils'

  export default {
    name: "dms-table",
    components: {Pagination},
    data() {
      return {
        innerVisible: false,
        listLoading: true,
        downloadLoading: false,
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        pageInfo: {
          total: 1,
          page: 1,
          size: 10,
        },
        tableData: [],
        listQuery: {
          yyid: null,
          cgdbh: null,
          cgdname: null,
          cgzt: "1",
          yyname: null,
          kscgsj: null,
          jecgsj: null,
          lsh: null,
          name: null,
          jx: null,
          specification: null,
          unit: null,
          zhxs: null,
          gysname: null,
          spname: null,
          yptype: null,
          ypjyzt: null,
          qyname: null,
          rktime: null,
          rkdh: null,
          ypph: null,
        },
        dictData: {
          ypjyztType: [],
          yptype: [],
          zlcc: []
        },
        isMultiple: false,
        multipleSelection: [], //table选择的行
      }
    },
    created() {
      this.listQuery.yyid = this.$store.state.user.deptId;
      this.getList();
      this.initDictData();
    },
    methods: {
      initDictData() {
        getDicts("ypjyzt_type").then(res => {
          this.dictData.ypjyztType = res.data;
          this.temp.ypjyztType = res.data;
        }).catch(err => {
          console.log(err);
        })

        getDicts("yp_type").then(res => {
          this.dictData.yptype = res.data;
          this.temp.ypjyztType = res.data;
        }).catch(err => {
          console.log(err);
        })

        getDicts("zlcc_type").then(res => {
          this.dictData.zlcc = res.data;
          this.temp.ypjyztType = res.data;
        }).catch(err => {
          console.log(err);
        })
        getDicts("cgdypmxb_type").then(res => {
          this.dictData.cgdypmxb_type = res.data;
          this.temp.ypjyztType = res.data;
        }).catch(err => {
          console.log(err);
        })


      },
      getList() {
        this.listLoading = true;
        getYyjycgdrkbList({...this.pageInfo, ...this.listQuery}).then(res => {
          if (res.code === 200) {
            this.tableData = res.data.rows;
            this.pageInfo.total = res.data.total;
          }
        }).catch(err => {
          console.log(err);
        }).finally(() => {
          this.listLoading = false;
        })
      },
      reset() {
        this.$refs['form'].resetFields()
      },
      dataFormat: function (row, column, cellValue) {
        if (undefined === cellValue || cellValue === "") {
          return "111";
        }
      },
      resetTemp() {
        this.temp = {
          ypjyzt: null,
          lsh: null,
          name: null,
          jx: null,
          specification: null,
          unit: null,
          zhxs: null,
          gysname: null,
          spname: null,
          zbprice: null,
          zlcc: null,
          yptype: null,
          ypjcbgtime: null,
          ypjcbgbh: null,
          zlccsm: null,
          lsjcc: null,
          lsj: null,
          bzunit: null,
          bzcz: null,
          isNojky: 1,
          isNoypjcbg: 1,
          pzwhtime: null,
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.author = this.$store.state.user.name;
            save(this.temp).then((res) => {
              this.temp.lsh = res.data;
              this.tableData.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      handleDownload() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = Object.keys(this.temp)
          const filterVal = Object.keys(this.temp)
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'table-list'
          })
          this.downloadLoading = false
        })
      },
      formatJson(filterVal) {
        return this.tableData.map(v => filterVal.map(j => {
          if (j === 'createTime') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row) // copy obj
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            update(tempData).then(() => {
              const index = this.tableData.findIndex(v => v.ypid === this.temp.ypid)
              this.tableData.splice(index, 1, this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      handleDelete(row, index) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.ypid);
          del(row && row.ypid).then(() => {
            this.tableData.splice(index, 1)
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {

        });
      },
      handleAffirmDel() {
        if (this.multipleSelection.length !== 0) {
          console.log("执行批量删除");
          setTimeout(() => {
            console.log("执行批量删除完成");
            this.isMultiple = false;
            this.$refs.multipleTable.clearSelection();
          }, 1000)
        } else {
          this.$message({
            message: '请选择一条数据',
            type: 'warning'
          });
        }
      },
      handleBatchDel() {
        this.isMultiple = !this.isMultiple
        if (!this.isMultiple) {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
